React 시작하기 - 이벤트 처리하기
November 01, 2020
React에서 이벤트 처리하기
React에서는 HTML과 달리 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
//HTML
<button onclick="activateLasers()">
Active Lasers
</button>
//React
<button onclick={activateLasers}>
Activate Lasers
</button>react에서는 addEventListener를 호출할 필요가 없습니다. 엘리먼트가 처음 렌더링될때 이벤트리스너를 제공하면 됩니다.
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState((state) => ({
isToggleOn: !state.isToggleOn,
}));
}
render() {
return <button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>;
}
}
ReactDOM.render(<Toggle />, document.getElementById('root'));이 예제에서 ON과 OFF를 토글할 수 있는 버튼을 렌더링합니다.
JSX에서 onclick의 콜백으로 handleClick메서드를 호출되어있는데
클래스의 메서드는 기본적으로 바인딩되어있지 않기 때문에
this.handleClick를 바인딩하지않고 onclick에 전달했다면 함수가 실제 호출될때 this는 undefined가 됩니다.
따라서 o’clock = {this.handleClick}처럼 뒤에 ()를 사용하지 않고 메소드를 참조할 경우, 해당 메소드를 바인딩 해주어야 합니다.
constructor(props) {
super(props);
this.state = { isToggleOn: true };
this.handleClick = this.handleClick.bind(this);
}이렇게 말이죠!!
화살표 함수를 사용해서 바인딩 하는 방법도 있습니다.
render(){
return(
<button onClick={() => this.handleClick()}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
)
}이 문법의 문제점은 Toggle`이 렌더링될 때마다 다른 콜백이 생성된다는 것입니다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있습니다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 필드 문법을 사용하는 것을 권장합니다.
이벤트 핸들러에 인자 전달하기
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>두 경우는 같은 일을 하며 두 경우 모두 이벤트를 나타내는 e 인자가 id 뒤로 2번째 인자로 전달됩니다.
bind를 사용할 경우 추가인자가 자동으로 전달됩니다.
